<template>
	<view class="root-wrap">
		<view class="welcome-text">请输入基本信息</view>
		<view class="form">
			<view class="form-item">
				<view class="label">企业logo<text class="require">*</text></view>
				<view class="logo-wrap" @click="uploadLogo">
					<image v-if="userInfo.logo==''||!userInfo.logo" src="../../../static/assets/imgs/sign-logo.png"></image>
					<image v-else :src="userInfo.logo"></image>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text class="title">营业执照</text>
					<text class="require">*</text>
				</view>
				<view class="img-wrap">
					<u-upload
						:fileList="fileList1"
						@afterRead="afterRead"
						@delete="deletePic"
						:previewFullImage="true"
						name="1"
						multiple
						:maxCount="1"
					></u-upload>
				</view>
				<text class="tips">（AI自动识别基本信息）</text>
			</view>
			<view class="form-item">
				<view class="label">企业名称<text class="require">*</text></view>
				<view class="input-wrap">
					<u--input
						placeholder="请输入企业名称"
						border="none"
						v-model="userInfo.entName"
						fontSize="28rpx"
						@change="e=>change(e,'entName')"
					  ></u--input>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text class="title">执照号</text>
					<text class="require">*</text>
				</view>
				<view class="input-wrap">
					<u-input
						placeholder="请输入执照号"
						border="none"
						v-model="userInfo.reg_num"
						fontSize="28rpx"
						:readonly="readOnly"
						@change="e=>change(e,'reg_num')"
					  ></u-input>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text class="title">法人代表</text>
					<text class="require">*</text>
				</view>
				<view class="input-wrap">
					<u-input
						placeholder="请输入法人代表"
						border="none"
						v-model="userInfo.faren"
						fontSize="28rpx"
						:readonly="readOnly"
						@change="e=>change(e,'faren')"
					  ></u-input>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text class="title">注册资金</text>
					<text class="require">*</text>
				</view>
				<view class="input-wrap">
					<u-input
						placeholder="请输入注册资金"
						border="none"
						v-model="userInfo.zhuce_money"
						fontSize="28rpx"
						:readonly="readOnly"
						@change="e=>change(e,'zhuce_money')"
					  ></u-input>
				</view>
			</view>
			<view class="form-item">
				<view class="label">联系电话<text class="require">*</text></view>
				<view class="input-wrap">
					<u-input
						placeholder="请输入联系电话"
						border="none"
						v-model="userInfo.phone"
						fontSize="28rpx"
						@change="e=>change(e,'phone')"
					  >
						<template slot="suffix">
							<u-button
								color="transparent"
								type="primary"
								size="mini" 
								open-type="getPhoneNumber"
								@getphonenumber="getphonenumber"
							><text class="bind">绑定电话</text></u-button>
						</template>
					  </u-input>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text class="title">联系邮箱</text>
					<text class="require">*</text>
				</view>
				<view class="input-wrap">
					<u-input
						placeholder="请输入联系邮箱"
						border="none"
						v-model="userInfo.contact_email"
						fontSize="28rpx"
						:readonly="readOnly"
						@change="e=>change(e,'contact_email')"
					  ></u-input>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text class="title">企业地址</text>
				</view>
				<view class="input-wrap">
					<u-input
						placeholder="请输入企业地址"
						border="none"
						v-model="userInfo.address"
						fontSize="28rpx"
						:readonly="readOnly"
						@change="e=>change(e,'address')"
					  ></u-input>
				</view>
			</view>
			<view class="form-item">
				<view class="label">
					<text class="title">企业性质</text>
				</view>
				<view class="input-wrap" @click="actionSheetShow=true">
					<u-input
						placeholder="请选择企业性质"
						border="none"
						disabled
						suffixIcon="arrow-down"
						v-model="userInfo.vendor_xingzhi_text"
						fontSize="28rpx"
						:readonly="readOnly"
						@change="e=>change(e,'vendor_xingzhi')"
					  ></u-input>
				</view>
			</view>
		</view>
		<view class="submit"><u-button color="#30D6C2" type="primary" shape="circle" @click="onSubmit">提交<image class="icon" src="../../../static/assets/imgs/next-step.png"></image></u-button></view>
		<u-action-sheet :actions="actionSheetList" :show="actionSheetShow" @select="actionSheetCallback"
					description="请选择企业性质" @close="actionSheetShow = false">
				</u-action-sheet>
	</view>
</template>

<script>
	import config from '@/common/config.js';
	import {getPhoneNumber,mpWeixinRegisterAndLogin,getMiscInfo} from '@/api/user.js';
	export default {
		data() {
			return {
				userInfo:{
					logo: "", //企业logo
					logoUrl: "",
					entName: "", //企业名称
					phone: "", //联系电话
					license_image: "", //营业执照图片
					reg_num: "", //营业执照号
					faren: "", //法人
					zhuce_money: "", //注册资金
					contact_email: "", //联系邮箱
					address: "", //地址
					vendor_xingzhi: "1" //企业性质
				},
				fileList1: [],
				loading: false,
				actionSheetList:[],
				actionSheetShow: false,
			};
		},
		onLoad(){
			this.initSelect();
		},
		methods:{
			initSelect(){
				getMiscInfo().then((res)=>{
					let obj = res.data.xz;
					Object.keys(obj).forEach(key => {
					  this.actionSheetList.push({
						  name: obj[key],
						  value: key
					  })
					});
				})
			},
			uploadLogo(){
				let that = this;
				uni.chooseImage({
					sourceType: ['camera','album'],//拍照或是打开系统相册选择照片
					count: 1,  //最多三张
					success(res) {
						uni.showLoading({
							title: '上传中...'
						});
						uni.uploadFile({
							url: config.baseUrl+'addons/bjjb/api.common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								
							},
							success: (uploadFileRes) => {
								const res = JSON.parse(uploadFileRes.data)
								console.log(res.code == 1)
								if(res.code == 1){
									that.userInfo.logo = res.data.fullurl;
									that.userInfo.logoUrl = res.data.url;
								}
								setTimeout(function () {
									uni.hideLoading();
								}, 200);
							}
						});
					}
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					console.log(result)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				let that = this;
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: config.baseUrl+'addons/bjjb/api.common/upload',
						filePath: url,
						name: 'file',
						formData: {
							'type':'license'
						},
						header: {
							'Token': that.vuex_token
						},
						success: (uploadFileRes) => {
							const res = JSON.parse(uploadFileRes.data)
							if(res.data.parseData){
								that.userInfo.entName = res.data.parseData.vendor_name;
								that.userInfo.faren = res.data.parseData.faren;
								that.userInfo.zhuce_money = res.data.parseData.zhuce_money;
								that.userInfo.reg_num = res.data.parseData.reg_num;
								that.userInfo.address = res.data.parseData.address;
								that.userInfo.license_image = res.data.url;
							}
							setTimeout(() => {
								resolve(res.data.fullurl)
							}, 500)
						}
					});
				})
			},
			actionSheetCallback(e){
				this.userInfo.vendor_xingzhi = e.value;
				this.userInfo.vendor_xingzhi_text = e.name;
			},
			change(e,key){
				this.userInfo[key] = e;
			},
			getphonenumber(res) {
				if (res.detail.errMsg == 'getPhoneNumber:fail user deny') {
					uni.showToast({
						title:'手机号获取失败',
						icon: 'none'
					})
				} else if ("getPhoneNumber:ok" == res.detail.errMsg) {
					console.log(res);
					getPhoneNumber({
						code: res.detail.code,
						encryptedData: res.detail.encryptedData,
						iv: res.detail.iv
					})
					.then(res => {
						console.log(res);
						this.userInfo.phone = res.data.phone;
					})
				}
			},
			onSubmit(){
				let that = this;
				if(this.loading) return
				
				const { logoUrl,entName,faren,reg_num,phone,zhuce_money,contact_email,vendor_xingzhi,license_image,license_image_url,address } = this.userInfo;
				if(!this.userInfo.logoUrl){
					uni.showToast({
						title:'请上传logo',
						icon: 'none'
					})
					return;
				}
				if(!this.fileList1[0].url){
					uni.showToast({
						title:'请上传营业执照',
						icon:'none'
					})
					return;
				}
				
				if(!entName || !reg_num || !faren || !zhuce_money || !phone || !contact_email || !license_image ){
					uni.showToast({
						title:'请检查所有必填项',
						icon:'none'
					})
					return;
				}
				this.loading = true;
				uni.showLoading({
					title: '提交中...'
				});
				uni.login({
					provider: 'weixin',
					success: (res) => {
						const params = {
							"code": res.code, //微信的code
							"logo": logoUrl, //企业logo
							"entName": entName, //企业名称
							"phone": phone, //联系电话
							"license_image": license_image, //营业执照图片
							"reg_num": reg_num, //营业执照号
							"faren": faren, //法人
							"zhuce_money": zhuce_money, //注册资金
							"contact_email": contact_email, //联系邮箱
							"address": address, //地址
							"vendor_xingzhi": vendor_xingzhi //企业性质
						}
						mpWeixinRegisterAndLogin(params)
						.then(res => {
							console.log(res);
							this.loading = false;
							uni.hideLoading();
							if(res.code==1){
								uni.showToast({
									title:'注册成功',
									icon:'success'
								})
								let token = res.data.token;
								that.vuex_login(res);
								const timer = setTimeout(()=>{
									uni.switchTab({
										url:'/pages/my/index'
									})
									clearTimeout(timer);
								},300)
							}else{
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						})
					},
					fail: (err) => {
						console.log(err);
						this.loading = false;
						uni.hideLoading();
					},
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.root-wrap{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		.welcome-text{
			width: 432rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #000000;
			line-height: 56rpx;
			text-align: center;
			margin-top: 58rpx;
			margin-bottom: 70rpx;
		}
		.form{
			width: 702rpx;
			margin: 0 24rpx;
		}
		.form-item{
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			width: 100%;
			margin-bottom: 42rpx;
			.label{
				min-width: 130rpx;
				font-size: 28rpx;
				color: #606266;
				line-height: 50rpx;
				margin-right: 14rpx;
				white-space: nowrap;
				.require{
					font-size: 28rpx;
					color: #E62020;
					line-height: 50rpx;
					margin-left: 16rpx;
				}
			}
			.logo-wrap{
				width: 148rpx;
				height: 148rpx;
				border-radius: 50%;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.input-wrap{
				flex: 1;
				height: 90rpx;
				background-color: #F3F4F6;
				margin: 0 auto;
				border-radius: 8rpx;
				.u-input{
					height: 100% !important;
					input{
						padding: 0 24rpx !important;
					}
				}
			}
			.tips{
				font-weight: 400;
				font-size: 28rpx;
				color: #606266;
				margin-left: 12rpx;
			}
		}
		
		.submit{
			width: 208rpx;
			height: 80rpx;
			margin-top: 84rpx;
			margin-bottom: 100rpx;
			.icon{
				width: 48rpx;
				height: 48rpx;
				margin-left: 16rpx;
			}
		}
		.bind{
			font-size: 28rpx;
			color: #909399;
		}
	}
</style>
